@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --breakpoint-xs: 30rem;

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-positive: var(--color-emerald-500);
  --color-negative: var(--color-orange-600);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

@utility responsive-icon {
  @media (width < --theme(--breakpoint-xs)) {
    font-size: 0;
    svg {
      font-size: initial;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  button:not([disabled]),
  [role='button']:not([disabled]) {
    cursor: pointer;
  }
}

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(224 71.4% 4.1%);

  --card: hsl(0 0% 100%);
  --card-foreground: hsl(224 71.4% 4.1%);

  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(224 71.4% 4.1%);

  --primary: hsl(220.9 39.3% 11%);
  --primary-foreground: hsl(210 20% 98%);

  --secondary: hsl(220 14.3% 95.9%);
  --secondary-foreground: hsl(220.9 39.3% 11%);

  --muted: hsl(220 14.3% 95.9%);
  --muted-foreground: hsl(220 8.9% 46.1%);

  --accent: hsl(220 14.3% 95.9%);
  --accent-foreground: hsl(220.9 39.3% 11%);

  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(210 20% 98%);

  --border: hsl(220 13% 91%);
  --input: hsl(220 13% 91%);
  --ring: hsl(224 71.4% 4.1%);

  --radius: 0.5rem;
}

.dark {
  --background: hsl(224 71.4% 4.1%);
  --foreground: hsl(222 2% 83%);

  --card: hsl(224 71.4% 4.1%);
  --card-foreground: hsl(210 20% 98%);

  --popover: hsl(224 71.4% 4.1%);
  --popover-foreground: hsl(210 20% 98%);

  --primary: hsl(189 94% 43%);
  --primary-foreground: hsl(220.9 39.3% 11%);

  --secondary: hsl(215 27.9% 16.9%);
  --secondary-foreground: hsl(210 20% 98%);

  --muted: hsl(215 27.9% 16.9%);
  --muted-foreground: hsl(217.9 10.6% 64.9%);

  --accent: hsl(215 27.9% 16.9%);
  --accent-foreground: hsl(210 20% 98%);

  --destructive: hsl(0 74% 42%);
  --destructive-foreground: hsl(210 20% 98%);

  --border: hsl(215 27.9% 16.9%);
  --input: hsl(215 27.9% 16.9%);
  --ring: hsl(221 39% 11%);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground h-full;
  }
}

html {
  @apply bg-background h-full;
}

body {
  @apply h-full;
}

#__next {
  @apply h-full;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  @apply bg-primary;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 1px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow:
    0 0 10px #29d,
    0 0 5px #29d;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
